<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <style>
        div * {
            font-size: 18px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <router-link to="/user/pangchao">my name</router-link>
        <router-link to="/parent/no.1">fu he zu jian</router-link>
        <router-link to="/duang/duangduang">duang</router-link>
        <router-link to="/redirect/duang">redirect --> user</router-link>
        <router-link to="/search?r=pangchao">rn-->router</router-link>
        <router-view></router-view>
        <router-view name="user2"></router-view>
        <router-view name="guest"></router-view>
    </div>
    <script>
        'use strict';
        /*
            在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
            使用 props 将组件和路由解耦：

                $route.params.name  ===>  props:["name"]

            props 取代与 $route 的耦合
        */
        let user = {
            props: ["name"],
            template: '<div> user name is {{name}} </div>'
        }
        let duang = {
            props: ["name", 'object', 'static'],
            template: '<div> user name is {{name}} --> {{object}} --> {{static}}</div>'
        }

        let query = {
            //函数用法
            /*
                props: (route) => ({
                    query: route.query.r
                }),
            */
            props: ["query"], //query ===> route.query.r
            template: '<div> user name is {{ query }}</div>'
        }

        let parent = {
            props: ["id"],
            template: '<div>parent id is {{ id }}</div>'
        }

        let user2 = {
            props: ["id"],
            template: '<div> router-view 1 user {{ id }} </div>'
        }

        let guest = {
            props: ["id"],
            template: '<div> router-view 2 guest {{ id }} </div>'
        }

        const router = new VueRouter({
            routes: [{
                mode: history,
                path: '/user/:name',
                name: 'username',
                component: user,
                //如果 props 被设置为 true，route.params 将会被设置为组件属性
                props: true
            }, {
                //props可以是一个对象，指定组件
                path: '/duang/:name',
                name: 'duang',
                component: duang,
                //如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
                props: {
                    name: true,
                    object: '如果props是对象，那么将会把参数原封不动的传入组件中',
                    static: '外部的参数无法动态传入组件，所以props对象，只在静态参数下有效'
                }
            }, {
                // 重定向无法修改props状态
                path: '/redirect/:name',
                name: 'redirect',
                redirect: '/user/:name',
                //这里的props对象无效
                props: false
            }, {
                path: '/parent/:id',
                name: 'parent',
                components: {
                    default: parent,
                    user2,
                    guest
                },
                // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
                props: {
                    default: true,
                    user2: false,
                    guest: true
                }
            }, {
                //props 函数模式
                path: '/search',
                component: query,
                //route.query --> ? r=pangchao
                props: (route) => ({
                    //query 是组件中props参数对象
                    //route 是props函数参数，返回router对象
                    //route.query 返回 ? 后面的追加参数 如: name=pangchao
                    //r 就是追加参数的对象
                    query: route.query.r
                }),
                /*
                函数模式
                你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。
                const router = new VueRouter({
                  routes: [
                    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
                  ]
                })
                URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。
                请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。
                如果你需要状态来定义 props，请使用包装组件，这样 Vue 才可以对状态变化做出反应。
                */
            }]
        })

        new Vue({
            router
        }).$mount('#app')
    </script>
</body>

</html>